<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
		id:{
			type:String,
			default:'ec'
		},
		color:{
            type:Array,
            default:[
                {
                    areaStyle: ['rgba(16,97,204, 0.3)','rgba(17,235,210, 0.1)'],
                    itemStyle: ['rgba(16,97,204, 0.3)','rgba(17,235,210, 0.1)'],
                },{
                    areaStyle: ['rgba(205,52,42, 0.5)','rgba(235,235,21,1)'],
                    itemStyle: ['rgba(205,52,42, 0.5)','rgba(235,235,21,1)']
                }
            ]
        }
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);
			var x_Date = ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'];
            var data1 = [1500, 1970, 1250, 1330, 1800, 1530, 1150, 1040, 1420, 1580, 1500, 1970];
            var data2 = [2970, 1680, 1660, 1700, 1300, 1550, 1820, 1440, 2820, 2970, 1680, 1660];

            var x_Date_len = x_Date.length;

            let option = {
                grid: {
                    left: '0',
                    right: '15',
                    bottom: '40',
                    top: '40',
                    containLabel: true,
                },
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                legend: {
                    icon: 'rect',
                    itemWidth: 20,
                    itemHeight: 5,
                    itemGap: 10,
                    width: '100%',
                    bottom: '5',
                    right: 'center',
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },
                dataZoom: [{
                    show: true,
                    height: 8,
                    width: '100%',
                    xAxisIndex: [
                        0
                    ],
                    bottom: 0,
                    right: 20,
                    startValue: 0,
                    endValue: 5,
                    handleSize: '100%',
                    handleStyle: {
                        color: "#d3dee5",

                    },
                    textStyle: {
                        color: "#fff"
                    },
                    borderColor: "#90979c",
                    zoomOnMouseWheel: false,
                    moveOnMouseWheel: true,
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: 'transparent',
                    fillerColor: 'rgba(255,255,255,0.2)',
                    handleStyle: {
                        color: 'transparent'
                    },
                    textStyle: {
                        color: 'transparent'
                    }
                }, {
                    type: "inside",
                    show: true,
                    height: 15,
                    startValue: 0,
                    endValue: 11,
                    zoomOnMouseWheel: false,
                    moveOnMouseWheel: true,
                    moveOnMouseMove: true,
                    xAxisIndex: [
                        0
                    ],
                }],
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0169bb'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    data: x_Date
                }],
                yAxis: [{
                    type: 'value',
                    name: '元/m²',
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 14,
                        padding: [0, 40, 8, 0]
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0169bb'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#013973',
                            type: 'dashed'
                        }
                    }
                }],
                series: [{
                    name: '预收款金额',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 2,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 3
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(16,97,204, 0.3)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(17,235,210, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                    itemStyle: {
                        normal: {

                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(16,97,204,1)'
                            }, {
                                offset: 1,
                                color: 'rgba(17,235,210,1)'
                            }])
                        },
                    },
                    data: data1
                }, {
                    name: '增值税预缴申报的销售额',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 2,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 3
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(205,52,42, 0.5)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(235,235,21, 0)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        },
                    },
                    itemStyle: {
                        normal: {

                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(205,52,42,1)'
                            }, {
                                offset: 1,
                                color: 'rgba(235,235,21,1)'
                            }])
                        },
                    },
                    data: data2
                }]
            };

            this.chart.setOption(option);

            window.addEventListener("resize", () => {
                this.chart.resize();
            });

            let this_ = this;
            setInterval(function() {
                if (option.dataZoom[0].endValue == x_Date_len - 1) {
                option.dataZoom[0].endValue = 5;
                option.dataZoom[0].startValue = 0;
            } else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
            }

			this_.chart.setOption(option);
            }, 2000)
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
